<template>
  <div class="shopping-cart" @click="toshopping">
    <span class="iconfont icon-gouwuche">
      <i class="number" v-if="show">{{ number }}</i>
    </span>
    <span class="text">我的购物车</span>
  </div>
</template>
<script>
// import { mapMutations, mapState } from "vuex";

export default {
  data() {
    return {
      show: true,
      number: 2,
    };
  },
  methods: {
    toshopping() {
      this.$router.push("./shoppingcar");
    },
  },
  // methods: {
  //   ...mapMutations([
  //     "changestatus",
  //     "changeimg",
  //     "changename",
  //     "changeshopnum",
  //     "changeUserID",
  //     "changeUsersex",
  //     "changephone",
  //     "changebirthday",
  //   ]),
  // },
  // computed: {
  //   ...mapState([
  //     "status",
  //     "img",
  //     "name",
  //     "shopnum",
  //     "UserID",
  //     "Usersex",
  //     "phone",
  //     "birthday",
  //   ]),
  // },
  mounted() {
    if (sessionStorage.getItem("token") == 1) {
      this.show = true;
      this.$axios
        .post("/shopping/findAllByUserId", {
          userId: sessionStorage.getItem("userId"),
        })
        .then((res) => {
          this.number = res.data.data.shoppingLIst.length;
          if (this.number == 0) {
            this.show = false;
          } else {
            this.show = true;
          }
        });
    } else {
      this.show = false;
    }
  },
};
</script>
<style  scoped>
.shopping-cart {
  position: relative;
  font-size: 12px;
  color: #e1251b;
  overflow: hidden;
  position: relative;
  z-index: 1;
  border: 1px solid #eee;
  width: 130px;
  height: 30px;
  background-color: #fff;
  line-height: 34px;
}
.icon-gouwuche {
  position: absolute;
  font-size: 20px;
  left: 20px;
}
.number {
  position: absolute;
  top: 1px;
  left: 7px;
  right: auto;
  display: inline-block;
  padding: 1px 3px;
  font-size: 12px;
  line-height: 12px;
  color: #fff;
  background-color: #e1251b;
  border-radius: 7px;
  min-width: 12px;
  text-align: center;
}
.text {
  position: absolute;
  left: 50px;
}
.shopping-cart:hover {
  border-color: #e1251b;
  cursor: pointer;
}
</style>